import Taro from '@tarojs/taro'
import {Component} from 'react'
import { AtSearchBar,AtDivider,AtGrid } from 'taro-ui'
import {View,ScrollView,Image,RichText} from '@tarojs/components'
import './index.less'
import './contents/contents.less'
import './header/header.less'
// import Header from "./header/header";
// import Contents from "./contents/contents";
import TabBar from "../common/taBar";
import {APIBASEURL} from '../constants/global.js'
import moment from 'moment'

export default class Index extends Component {
  state = {
    searchValue: '',
    contentList: [],
    dataType: ''
  }; 

  componentWillMount(){
    console.log("get content list......");
    this.getContentsList('dataType','constraint');
  }
  
  shouldComponentUpdate(nextProps, nextState){
    if(nextState.contentList.length>0){
      return true;
    }else{
      return false;
    }
  }

  getContentsList(dataType,constraint){
    Taro.request({
      url: `${APIBASEURL}hotSpots/index`,
      // url: `http://localhost:80/hotSpots/index`,
      header: {
        'content-type': 'application/json'
      },
      dataType: 'json',
      success: res=>{
        // console.log(res.data);
        const list=res.data.list;
        if(list.length>0){
          this.setState({   //若直接this.state.contentList=list; 则赋值将不会在全局生效
            contentList: list
          })
          console.log(list);
        }else{
          console.log('server request failed......');
        }
      }
    })
  }

  handleClick(event){
    console.log(event.target.getAtrribute('key'));
    // Taro.navigateTo({
    //   url: 'details/details'
    // })
  }

  onChange(value){
    this.setState({
      value: value
    })
  }

  itemClick(item, index) {
    console.log(item, index);
    
    if(index===3){
      Taro.navigateTo({
        url: 'nous/nous'
      })
    }
  }
  render() {
    let contentList=this.state.contentList; //内容列表
    return (
      <View>
       
        <AtSearchBar className='searchBar' value={this.state.searchValue} onChange={this.onChange.bind(this)} placeholder='搜索今日热点' />
      
        {/* <Header /> */}
        <AtGrid className='titleBars' onClick={this.itemClick.bind(this)} data={
        [
          {
            image: 'https://www.juntaitec.cn/wechatapp/images/jqys.svg',
            value: '节气养生'
          },
          {
            image: 'https://www.juntaitec.cn/wechatapp/images/zwbj.svg',
            value: '自我保健'
          },
          {
            image: 'https://www.juntaitec.cn/wechatapp/images/yssl.svg',
            value: '药膳食疗'
          },
          {
            image: 'https://www.juntaitec.cn/wechatapp/images/zycs.svg',
            value: '中药常识'
          },
          {
            image: 'https://www.juntaitec.cn/wechatapp/images/zzwh.svg',
            value: '中医文化'
          },
          {
            image: 'https://www.juntaitec.cn/wechatapp/images/ekjk.svg',
            value: '儿科健康'
          }
        ]
      }
      />
        {/* <Contents /> */}
        <ScrollView className="contentList" >
          {
            contentList.length>0 ?
            contentList.map((item,index)=>{
              return(
                <View className="contentItem" onClick={this.handleClick.bind(this)} key={item.itemid+'-'+item.itemcode}>
                    <View className="imgView">
                      <Image src='https://www.juntaitec.cn/wechatapp/images/no_image.jpg'></Image>
                    </View>
                    <View className="contentView">
                      <View className="titleView">
                        <View className="itemTitle">{item.hotspotTitle}</View>
                        <View className="createTime">{moment(item.createat).format('YYYY-MM-DD')}</View>
                      </View>
                      <RichText nodes={item.hotspotContent} className="describe"></RichText>
                    </View>
                </View>
              )
            })
            : ''
          }
        
        <AtDivider content='没有更多了' fontColor='#2d8cf0' lineColor='#2d8cf0' />
      </ScrollView>
        <TabBar tabBarCurrent={1} />
      </View>
    )
  }
}

